{% extends "start.html" %}


{% block extraTitle %}Items{% endblock %}

{% block topbar %}
    {% if can_buy %}
        &emsp;Welcome back!
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <a href="/logout/">Logout</a>
    {% else %}
        &emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <a href="/login/">Login here!</a>
    {% endif %}
{% endblock %}

{% block pageTitle %}Items{% endblock %}
{% block sectionTitle %}Items are{% endblock %}

{% block content %}    
    {% if can_buy %}
        <!--content if logged in-->
        <table>
            <tr>
                <td>&emsp;</td>
                <td><center><strong>-Name-</strong></center></td>
                <td><center><strong>-What is this?-</strong></center></td>
                <td><center><strong>-So I get ... -</strong></center></td>
                <td><center><strong>-Level Required-</strong></center></td>
                <td><center><strong>-Costs-</strong></center></td>
                <td><center><strong>-Want it?-</strong></center></td>
            </tr>            
            
            {% for x in all_items %}
                <tr>
                    <td><img src="../static/items/{{x.name}}.jpg" width="60" height="60"></td>
                    <td><center>{{ x.name }}</center></td>
                    <td>{{ x.description }}</td>
                    <td><center>Energy +{{ x.energy_boost }}</center></td>
                    <td><center>{{ x.level_required }}.0</center></td>
                    <td><center>$ {{ x.cost }}</center></td>
                    <td>
                        <center>
                            {% if x.cost <= profile.money and x.level_required <= profile.level and profile.money > 0%}
                                 <a href="/buyitem/{{x.id}}/">IT must be mine! Now!</a>
                            {% else %}
                                Not now ... but later ...
                            {% endif %}
                        </center>
                    </td>
                </tr>
            {% endfor %}
        </table>
        <!-- buy button added-->
    {% else %}
        <!--content if not logged in-->
        <table>
            <tr>            
                <td>&emsp;</td>
                <td><center><strong>-Name-</strong></center></td>
                <td><center><strong>-What is this?-</strong></center></td>
                <td><center><strong>-So I get ... -</strong></center></td>
                <td><center><strong>-Level Required-</strong></center></td>
                <td><center><strong>-Costs-</strong></center></td>            
            </tr>
            {% for x in all_items %}
                <tr>
                    <td><img src="../static/items/{{x.name}}.jpg" width="60" height="60"></td>
                    <td><center>{{ x.name }}</center></td>
                    <td>{{ x.description }}</td>
                    <td><center>Energy +{{ x.energy_boost }}</center></td>
                    <td><center>{{ x.level_required }}.0</center></td>
                    <td><center>$ {{ x.cost }}</center></td>
                </tr>
            {% endfor %}
        </table>
        <!--end content if not logged in-->
    {% endif %}
{% endblock %}


{% block profile %}
    {% block level %}
        <img src="../static/levels/{{profile.level}}.0.jpg"  width="84" height="80">
    {% endblock %}
    <font size="3">
        <ul>
            <li>EXP: {{ profile.experience }} </li>
            <li>${{ profile.money }}.00 </li>
            <li>Energy :{{ profile.energy }}/{{profile.total_energy}} </li>
        </ul>
    </font>
{% endblock %}